<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1_数据绑定</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">

      <!-- 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 -->

      <!-- 缩写 -->
      <p>单向绑定<input type="text" :value="message" /></p>
      <p>双向绑定<input type="text" v-model="message" /></p>

      <!-- 完整写法 -->
      <!-- <p><input type="text" v-bind:value="message"></p>
      <p><input type="text" v-model:value="message"></p> -->

      <!-- 错误示例 -->
      <!-- 下面这行代码是不对的，因为v-model只能用于表单类元素（输入类元素）-->
      <!-- <h1 v-model:x="x">你好，欢迎学习前端</h1> -->
      <!-- v-model只能配合 input tag，纵使设置了其他键名，最终也强制转为了value -->
      <!-- <input type="text" v-model:x="x"> -->

      <!-- v-model 注意事项 -->
      <!-- v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 -->
      <!-- 对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。  -->
    </div>
  </body>

  <script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    new Vue({
      el: "#app",
      data: {
        message: "Hello Vue",
        x: "xyz"
      },
    });
  </script>
</html>
